<template>
	<view class="container" >
	<!-- 	<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#0C83CC" sliderBgColor="#0C83CC"
		 @change="change"></tui-tabs> -->
		<view class="top-view">
			<view class="top-view-title">
			<!-- {{goodsInfo['payStatusList'][goodsInfo['data']['pay_status']]['title']}} -->
			{{goodsInfo['data']['status_name']['title']}}
			</view>
			
			<view class="top-view-title-des" v-if="goodsInfo['data']['pay_status'] == 1">用户已支付</view>
			<view class="top-view-title-des" v-else>用户未付款哦~</view>
			
		</view>
		 
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<view class="tui-order-item" >
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						<view>
							<image :src="goodsInfo['userInfo']['imageurl']" class="tui-avatar"></image>
							{{goodsInfo['userInfo']['nickname']}}
						 </view>
						<!-- <view class="tui-order-status">已完成</view> -->
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" :arrow="false" class="listCell">
					<view class="tui-goods-title colorLan" @click="details('../dragon/details?id='+goodsInfo.data.jielong_id+'&jielong_id='+goodsInfo.data.jielong_id+'&jielong_user_id='+goodsInfo.data.jielong_user_id)">
						<view> {{goodsInfo['jielongInfo']['title'] }}</view>
					</view>
				</tui-list-cell>
			
				<div class='goodsBox' @click="details('../dragon/details?id='+goodsInfo.data.jielong_id+'&jielong_id='+goodsInfo.data.jielong_id+'&jielong_user_id='+goodsInfo.data.jielong_user_id)">
					<block v-for="(item,index) in goodsInfo['goodsList']" :key="index">
						<tui-list-cell padding="0">
							<view class="tui-goods-item">
								<!-- <image src="/static/my/bg.png" class="tui-goods-img"></image> -->
								<view class="tui-goods-center">
									<!-- <view class="tui-goods-name">{{item.goods_name}}</view> -->
									<view class="tui-goods-name">{{item.goods_attr}}  +{{item.goods_number}}</view>
									<!-- <view class="tui-goods-attr">黑色，50ml</view> -->
								</view>
								<view class="tui-price-right">
									<view>￥{{formatPrice(item.goods_price * item.goods_number)}}</view>
									<!-- <view>x2</view> -->
								</view>
							</view>
						</tui-list-cell>
					</block>
				</div>
				
				<tui-list-cell :hover="false" :last="true">
					<view class="tui-goods-price">
						<view>合计:</view>
						<view class="tui-price-large">￥{{formatPrice(goodsInfo['data']['real_amount'])}}</view>
					</view>
				</tui-list-cell>
			</view>
			
			
			
		</view>
		
<!-- 		<view class="tui-order-list-name" v-if="(goodsInfo['jielongInfo']['shipping_type'] == 2)">
			<tui-list-cell v-if="index<3" :hover="false" v-for="(item,index) in goodsInfo['jielongInfo']['shipping_network']" :key="index">										<text v-if="index == 0" class="font-size">提货点：{{item.val?item.val:''}}</text>								<text v-else-if="index == 1" class="font-size">提货地址：{{item.val?item.val:''}}</text>								<text v-else-if="index == 2" class="font-size">团长：{{item.val?item.val:''}} {{goodsInfo['jielongInfo']['shipping_network']['3']['val']?goodsInfo['jielongInfo']['shipping_network']['3']['val']:''}}</text>							</tui-list-cell>
		</view> -->
		
		<view class="tui-order-list-name" style="background: #FFF;">
			<tui-list-view  color="#777" class="tui-list-view">
				<tui-list-cell :hover="false">
					<view class="headziti">收件人：</view><view class="font-size_neirong">{{goodsInfo['data']['shipping_param']['name']}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="headziti">手机号：</view><view class="font-size_neirong">{{goodsInfo['data']['shipping_param']['mobile']}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="headziti">收货地址：</view><view class="font-size_neirong">{{goodsInfo['data']['shipping_param']['area_name']}}{{goodsInfo['data']['shipping_param']['address']}}</view>
				</tui-list-cell>
				
				
				<tui-list-cell :hover="false" v-for="(item,index) in goodsInfo['data']['express_info']" :key="index">
					<view class="headziti">{{item.delivery_name}}：</view>
					<view class="font-size_neirong">{{item.waybill_id?item.waybill_id:''}}<text class="font-size_neirong delivery_name" style="margin-left: 10rpx;" @click="duplication(item.waybill_id)">复制单号</text></view>
				</tui-list-cell>
				<view class="duplication" @click="duplication_order()">复制信息</view>
			</tui-list-view>
		</view>
		
		<view class="tui-order-list-name" style="padding-bottom: 280rpx;">		
			<tui-list-view  color="#777" class="tui-list-view">
				<tui-list-cell :hover="false" class="font-size">
					<view class="headziti">订单号：</view><view class="font-size_neirong">{{goodsInfo['data']['order_sn']}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" class="font-size">
					<view class="headziti">下单时间：</view><view class="font-size_neirong">{{formatTime(goodsInfo['data']['create_time'])}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" class="font-size">
					<view class="headziti">支付时间：</view><view class="font-size_neirong">{{goodsInfo['data']['pay_time'] > 0?formatTime(goodsInfo['data']['pay_time']):''}}</view>
				</tui-list-cell>
				<tui-list-cell v-if="goodsInfo['data']['remark']" :hover="false" class="font-size">
					<view class="headziti">个人备注：</view><view class="font-size_neirong">{{goodsInfo['data']['remark']}}</view>
				</tui-list-cell>
				<tui-list-cell v-if="goodsInfo['data']['merchant_remark']" :hover="false" class="font-size">
					<view class="headziti">商家备注：</view><view class="font-size_neirong" style="color: #07c160;">{{goodsInfo['data']['merchant_remark']}}</view>
				</tui-list-cell>
			</tui-list-view>
		</view>		
		
		<!--底部操作栏-->
		<!-- v-if="item.status == 1 &&  item.pay_status == 3 && item.pay_open == 1" -->
		<view class="tui-operations" v-if="goodsInfo['data']['refund_status'] == 4">
			<view class="button-order" @click="refundthe_cancel(goodsInfo['data']['order_id'])" v-if="goodsInfo['data']['refund_status'] == 4">
				取消退款
			</view>
			<view class="button-order" @click="refundthe(goodsInfo['data']['order_id'],formatPrice(goodsInfo['data']['amount']))" v-if="goodsInfo['data']['refund_status'] == 4">
				确认退款
			</view>
		</view>
		<!--底部操作栏-->
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" title="提示" :content="tip"></tui-modal>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
		
		<!-- 接龙退款 -->
		<view class="share-pros" >
			<view class="share-pro-mask" v-if="reimburse" @click="refundthe_shut"></view>
			<view class="share-pro-dialog-goods" :class="reimburse?'open':'closeCart'" catchtouchmove="disMove">
				<view class="tui-operation tui-chat-operation topdingdan">
					<view class="tui-export-title numbers">退款信息</view>
					<image src="../../static/my/icon/occlude3x.png" class="tui-avatar-autonym" @click="refundthe_shut"></image>
				</view>
				<view class="goodsCart tuikuanl">
					<tui-list-cell :arrow="false" class="tui-list" :hover="false">
						<view class="tui-list-cell-name" style="float:left;line-height: 40rpx;">用户支付金额</view>
						<view class="tui-right rightzit" style="width: 70% !important;float:left;line-height: 40rpx;">
							<input class="tui-input-ordernumber" name="ordernumber" placeholder="用户支付金额" maxlength="50" type="text"  v-model="Amountpaidby_user" disabled="disabled"/>
						</view>
					</tui-list-cell>
					<tui-list-cell :arrow="false" class="tui-list gongshi" :hover="false">
						<view class="tui-list-cell-name" style="float:left;line-height: 40rpx;">实际退款金额</view>
						<view class="tui-right rightzit" style="width: 70% !important;float:left;line-height: 40rpx;">
							<input placeholder-class="phcolor" @input="oninput(Amountpaidby_user_commit)" maxlength="8" class="tui-input" name="Amountpaidby_user_commit" placeholder="0.00" v-model="Amountpaidby_user_commit"  min="0.1" max="99999" step="0.01"  type="digit" />
						</view>
					</tui-list-cell>
				</view>
				<view class="tui-operation tui-chat-operation Determine">
					<button class="tui-btn export" @click="application(Amountpaidby_order_id,Amountpaidby_user,Amountpaidby_user_commit)">提交</button>
				</view>
			</view>
		</view>
		
		<tui-actionsheet :show="showActionSheet" :tips="tips" :item-list="item" :mask-closable="maskClosable" :color="color" :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
		
		<!-- 接龙退款 -->
	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	// import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiButton from "@/components/extend/button/button"
	// import tuiLoadmore from "@/components/loadmore/loadmore"
	// import tuiNomore from "@/components/nomore/nomore"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiModal from "@/components/modal/modal"
	import tuiToast from "@/components/extend/toast/toast"
	
	// import tuiSticky from "@/components/sticky/sticky"
	export default {
		components: {
			// tuiTabs,
			tuiButton,
			// tuiLoadmore,
			// tuiNomore,
			tuiListCell,
			tuiModal,
			tuiToast
			// tuiSticky
		},
		data() {
			return {
				tip: '确定取消该订单吗？',
				pageIndex: 1,
				goodsInfo: {data:{amount:0,status_name:{title:'待支付',}}},
				parm: {},
				orderExpire: 30,
				modal:false,
				url : 'order/cancel',
				reimburse: false,
				Amountpaidby_user: '0.00',
				Amountpaidby_user_commit: '0.00',
				Amountpaidby_order_id: '',
			}
		},
		onLoad:function(option){
			this.parm = option
			if(uni.getStorageSync('userInfo')){
				this.loadData();
			}else{
				setTimeout(() => {
					if(uni.getStorageSync('userInfo')){
						this.loadData();
					}
				}, 4000);
			}
			let config = uni.getStorageSync('publicConif');
			this.orderExpire = config['order_expire'] / 60;
			// // 禁止转发
			// wx.hideShareMenu();
		},
		methods: {
			phonecall: function(e){
				console.log(e);
				wx.makePhoneCall({
					phoneNumber: e,
				})
			},
			refundthe_cancel: function(order_id){
				if(!order_id){
					this.tui.toast("订单不存在！");
					return false
				}
				
				let then = this;
				wx.showModal({
					title: '提示！',
					content: '您确定取消退款吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点确定了');
							then.tui.request('order/refundRefuse',{
								order_id:order_id,
							}).then((res) => {
								if(res.code == '0000'){
									then.isShow = false
									let params = {
										title: "取消成功",
										imgUrl: "/static/toast/check-circle.png",
										icon: true
									};
									
									then.loadData();
									then.refundthe_shut();
									then.$refs.toast.show(params);
								}else{
									let params = {
										title: res.msg,
										imgUrl: "/static/toast/info-circle.png",
										icon: true
									};
									then.$refs.toast.show(params);
								}
							}).catch((err) => {
								let params = {
									title: "服务器异常",
									imgUrl: "/static/toast/fail-circle.png",
									icon: true
								};
								then.$refs.toast.show(params);
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			oninput: function(goods_price_fen){
				// console.log(goods_price_fen,item);
				// console.log('aaaaaaaaaaa oninput aaaa',e.detail.value);
				// var totalvalue = goods_price_fen.replace(/\.{2,}/g,".");
				if(goods_price_fen > this.Amountpaidby_user){
					wx.showToast({
						title: '退款金额不能大于原金额哦！',
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						this.Amountpaidby_user_commit = this.Amountpaidby_user;
					}, 1);
					return true;
				}
				var valuenum = goods_price_fen.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
				// var valuenum = valuenum.replace(/[^\d.]/g, '');
				setTimeout(() => {
					this.Amountpaidby_user_commit = valuenum;
				}, 1);
				
				// this.goods_list[item].goods_price_fen = goods_price_fen.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
				// console.log(this.goods_list[item].goods_price_fen);
				
			},
			// 退款方法
			application: function(order_id,amount_yuan,amount){
				
				if(!order_id){
					this.tui.toast("订单不存在！");
					return false
				}
				
				console.log(order_id);
				console.log(amount);
				let then = this;
				wx.showModal({
					title: '提示！',
					content: '您确定退款吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点确定了');
							
							then.tui.request('order/refundChecked',{
								order_id:order_id,
								refund_amount:amount * 100,
							}).then((res) => {
								if(res.code == '0000'){
									then.isShow = false
									let params = {
										title: "退款成功",
										imgUrl: "/static/toast/check-circle.png",
										icon: true
									};
									
									then.loadData();
									then.refundthe_shut();
									then.$refs.toast.show(params);
								}else{
									let params = {
										title: res.msg,
										imgUrl: "/static/toast/info-circle.png",
										icon: true
									};
									then.$refs.toast.show(params);
								}
							}).catch((err) => {
								let params = {
									title: "服务器异常",
									imgUrl: "/static/toast/fail-circle.png",
									icon: true
								};
								then.$refs.toast.show(params);
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 开启退款弹窗
			refundthe: function(order_id,amount){
				this.reimburse = true;
				this.Amountpaidby_user = amount;
				this.Amountpaidby_user_commit = amount;
				this.Amountpaidby_order_id = order_id;
			},
			// 关闭退款弹窗
			refundthe_shut: function(){
				this.reimburse = false;
			},
			// application: function(orderid){
			// 	let thal = this;
			// 	wx.showModal({
			// 		title: '提示！',
			// 		content: '您确认退款吗？',
			// 		success(res) {
			// 			if (res.confirm) {
			// 				// console.log('用户点确定了');
			// 				// thal.sendMsg();
			// 				thal.application(orderid);
			// 			} else if (res.cancel) {
			// 				// console.log('用户点击取消');
			// 			}
			// 		}
			// 	})
			// },
			applyfor_order: function(orderid){
				this.tui.request('order/refundCheck',
					{
						order_id:orderid,
					}
				).then((res) => {
					wx.showToast({
						title: '退款申请成功',
						icon: 'success',
						duration: 2000
					})
					this.loadData();
				}).catch((err) => {
					console.log('err', err)
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			duplication: function(waybill_id){
				wx.setClipboardData({
					data: waybill_id,
					success: function (res) {
						wx.hideLoading();
						wx.showModal({
							title: '提示',
							content: '单号复制成功',
							showCancel: false
						});
					}
				})
			},
			duplication_order: function(){
				
				var waybill_id = 
							this.goodsInfo['data']['shipping_param']['name']+' '+
							this.goodsInfo['data']['shipping_param']['mobile']+' '+
							this.goodsInfo['data']['shipping_param']['area_name']+' '+
							this.goodsInfo['data']['shipping_param']['address'];
					
				wx.setClipboardData({
					data: waybill_id,
					success: function (res) {
						wx.hideLoading();
						wx.showModal({
							title: '提示',
							content: '订单信息复制成功',
							showCancel: false
						});
					}
				})
			},
			details: function(url,type){
				if(!url){
					return false;
				}
				if(type == 1){
					uni.switchTab({
						url: url
					});
					return false
				}
				// var pages = getCurrentPages();
				// var beforePage = pages[pages.length - 2];
				// // 调用列表页的获取数据函数
				// beforePage.loadData();
				uni.navigateTo({
				   url: url,
				});
			},
			handleClick: function(e) {
				let index = e.index;
				if (index === 0) {
					// this.tui.toast("你点击了取消按钮")
				} else {
					this.orderCancel();
					// this.tui.toast("你点击了确定按钮")
				}
				this.hide()
			},
			
			hide: function(){
				this.modal = false
			},
			show: function(data,Dtip) {
				this.modal = true
				this.url = data
				this.tip = Dtip
				
			},
			formatTime: function(timestamp){
				if(!timestamp){
					return false
				}
				return dataTime.formatDate('y-m-d h:i',timestamp);
			},
			orderCancel: function(){
				this.tui.request(this.url, this.parm).then((res) => {
					if(res.code == '0000'){
						wx.navigateBack({
						  delta: -1
						})
						let params = {
							title: '操作成功',
							imgUrl: "/static/toast/check-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
						setTimeout(() => {
							uni.redirectTo({
							   url: './order?tab='+this.parm.tab,
							});
						}, 200);
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
					}					
					
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			loadData: function(){
				this.parm['is_merchant'] = '1';
				this.tui.request('order/details', this.parm).then((res) => {
					if(res['data']['shipping_param']){
						res['data']['shipping_param']  = JSON.parse(res['data']['shipping_param']);
					}
					if(res['jielongInfo']['shipping_network']){
						res['jielongInfo']['shipping_network']  = JSON.parse(res['jielongInfo']['shipping_network']);
					}
					if(res['data']['express_info']){
						res['data']['express_info']  = JSON.parse(res['data']['express_info']);
					}
					this.goodsInfo = res
				}).catch((err) => {
					console.log('err', err)
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			formatPrice: function(fee){
				return this.tui.centsToYuan(fee)
			},
		},
	}
</script>

<style lang="scss">
	@import '../../static/style/thorui.css';
	
	.tui-list-cell{
		display: block !important;
	}
	
	.tui-cell-class{
		padding: 10rpx 30rpx !important;
		font-size: 28rpx !important;
	}
	
	.font-size_neirong{
		font-size: 28rpx !important;
		font-weight: 400;
		max-width: 450rpx;
		float: left;
	}
	
	.headziti{
		color: #A3A3A3;
		width: 180rpx !important;
		float: left;
	}
	
	.telephone{
		width: 27rpx;
		height: 27rpx;
		float: left;
		margin-left: 10rpx;
		margin-top: 7rpx;
	}
	
	.container{
		padding-bottom: 400rpx;
	}
	
	.top-view{
		background: #1193e3;
		height: 180rpx;
		color: #FFFFFF;
		padding: 65rpx 0rpx 0rpx 70rpx;

	}
	.top-view-title{
		font-size: 40rpx;
		font-weight: 500;
	}
	.top-view-title-des{
		font-size: 28rpx;
		margin-top: 20rpx
	}
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
/* 	.tui-tabs-active{
		color: #0C83CC !important;
		font-weight: 400;
	}
	.tui-tabs-slide{
		background: #0C83CC !important;
	} */
	.tui-order-list {
		margin-top: 80rpx;
	}
	.tui-order-list-name{
		margin-top: 30rpx;
	}
	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background: #FFFFFF;
	}
	.colorLan{
		color: #0a8fe2 !important;
		font-size: 35rpx !important;
		font-weight: 500 !important;
		
	}
	.tui-goods-title {
		width: 100%;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		/* max-width: 450rpx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28rpx;
		line-height: 34rpx;
		color: #666;
		float: left;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 28rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 30rpx;
		font-weight: 450;
	}
	
	.tui-price-large {
		font-size: 32rpx;
		/* line-height: 30rpx; */
		/* font-weight: 500; */
		color: red;
	}
/* 
	.tui-order-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
 */
	.tui-btn-ml {
		margin-left: 20rpx;
	}
	.tui-avatar{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	.listCell .tui-list-cell::after{
		border-bottom: 1rpx solid #FFFFFF;
	}
	.font-size{
		font-size: 30rpx !important;
		font-weight: 400;
	}
	
	
	/*底部操作栏*/	
	.tui-operations {
		z-index: 999;
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		/* background: red; */
		position: fixed;
		display: flex;
		align-items: center;
		justify-content:flex-end;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	}
	.tui-operation {
		padding: 10px 30rpx 0rpx 30rpx;
	}
	.button-order{
		font-size: 30rpx;
		border: 1rpx solid #ff1919;
		padding: 10rpx 25rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		color: #ff1919;
	}
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	/*底部操作栏*/
	.goodsBox{
		border-bottom: 1px solid #e9e9e9;
		border-top: 1px solid #e9e9e9;
		padding: 30rpx 0rpx;
		width: 95%;
		margin: 0px auto;
	}
	.tui-red{
		background: #0A8FE2 !important;
	}
	
	.tui-red-outline {
		color: #0A8FE2 !important;	
	}
	.tui-red-outline::after {
		border: 1px solid #0A8FE2 !important;
	}
	.tui-list-cell::after{
		border-bottom: none !important;
	}
	.order_delivery .tui-list-cell{
		display: block;
		height: 100rpx;
		width: 100%;
	}
	.delivery_name{
		color: #1193E3;
		float: right;
	}
	
	/* 导出 */
	.tui-modal-export {
		text-align: center
	}
	.tui-export-title {
		padding-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #33a3e7 !important; 
	}
	.tui-export-footer-title{
		font-size: 26rpx;
		text-align: left;
		color: #999999;
		line-height: 45rpx;
		margin: 30rpx auto;
	}
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: left;
		background: #f6f6f6 !important;
		padding: 25rpx 30rpx;
		border-radius: 15rpx;
		vertical-align: middle;
	}
	
	.tui-title-email {
		line-height: 40rpx !important;
		flex-shrink: 0;
		font-weight: 400;
		float: left;
		width: 15%;
	}
	.tui-input-export {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		text-align: left;
		height: 40rpx !important;
		list-height: 40rpx !important;
		float: left;
		min-height: 40rpx !important;
		max-height: 40rpx !important;
		// z-index: -100;
	}
	.tui-btn-small {
		width: 90% !important;
		height: 80rpx !important;
		line-height: 80rpx !important;
		border-radius: 15rpx !important;
		background: #0A8FE2 !important;
	}
	.tui-modal-show{
		padding: 15px 15px !important;
	}
	.pro-btn{
		background: #0A8FE2 !important;
		color: #FFFFFF !important; 
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	/* 导出 */
	.tui-nomore-text{
		background: none !important;
	}
	.tui-right-flex{
		padding-left: 30rpx;
	}
	.express{
		color: #1193E3;
		float: right;
		// font-siez: ;
	}
	.oddnumbers{
		color: #999999;
	}
	.addnumbers{
		color: #1193E3;
		font-size: 32rpx;
	}
	.share-pro{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		z-index: 1000;
		line-height: 1;
		box-sizing: border-box;
		.share-pro-mask-share{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0);
		}
		.share-pro-mask{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}
		.share-pro-dialog-goods {
			width: 750rpx;
			height: 900rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
		
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
			
			}
		}
		
		.share-pro-dialog {
			width: 750rpx;
			height: 470rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
	
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
				padding-bottom: 30rpx;
				.share-item{
					display: flex;
					flex-direction:column;
					justify-content: center;
					justify-content:space-around;
					.share-pro-title-text{
						font-size: 30rpx;
					}
					.share-pro-title-text-des{
						font-size: 28rpx;
						color: #CCCCCC;
						padding-top: 15rpx;
					}
					.share-icon{
						text-align:center;
						width: 100rpx;
						height: 100rpx;
						color: #42ae3c;
						margin: 0px auto;
						margin-top: 39rpx;
						margin-bottom: 16rpx;
					}
					&:nth-child(2){
						.share-icon{
							color: #ff5f33;
						}
					}
				}
			}
		}
	
		/* 显示或关闭内容时动画 */
	
		.open {
			transition: all 0.3s ease-out;
			transform: translateY(0);
		}
		.closeCart {
			transition: all 0.3s ease-out;
			transform: translateY(900rpx);
		}
		.close {
			transition: all 0.3s ease-out;
			transform: translateY(470rpx);
		}
	
	}
	.share-pros{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		z-index: 1000;
		line-height: 1;
		box-sizing: border-box;
		.share-pro-mask-share{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0);
		}
		.share-pro-mask{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}
		.share-pro-dialog-goods {
			width: 750rpx;
			height: 600rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
		
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
			
			}
		}
		
		.share-pro-dialog {
			width: 750rpx;
			height: 470rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
	
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
				padding-bottom: 30rpx;
				.share-item{
					display: flex;
					flex-direction:column;
					justify-content: center;
					justify-content:space-around;
					.share-pro-title-text{
						font-size: 30rpx;
					}
					.share-pro-title-text-des{
						font-size: 28rpx;
						color: #CCCCCC;
						padding-top: 15rpx;
					}
					.share-icon{
						text-align:center;
						width: 100rpx;
						height: 100rpx;
						color: #42ae3c;
						margin: 0px auto;
						margin-top: 39rpx;
						margin-bottom: 16rpx;
					}
					&:nth-child(2){
						.share-icon{
							color: #ff5f33;
						}
					}
				}
			}
		}
	
		/* 显示或关闭内容时动画 */
	
		.open {
			transition: all 0.3s ease-out;
			transform: translateY(0);
		}
		.closeCart {
			transition: all 0.3s ease-out;
			transform: translateY(600rpx);
		}
		.close {
			transition: all 0.3s ease-out;
			transform: translateY(470rpx);
		}
	
	}
	.tui-avatar-autonym{
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin-left: 8rpx;
		float: right;
		margin-bottom: 10px;
	}
	.numbers{
		color: #000 !important;
		font-weight: 550;
		font-size: 33rpx !important;
	}
	.topdingdan{
		background-color: #FFF !important;
		border-bottom: 1rpx solid #E8E8E8;
	}
	.goodsCart .tui-list-cell{
		width: 90% !important;
		margin: 0 auto !important;
		background-color: #F7F7F7 !important;
		top: 35rpx !important;
	}
	.gongshi .tui-list-cell{
		top: 70rpx !important;
	}
	.gongshis .tui-list-cell{
		top: 105rpx !important;
	}
	.gongshis .tui-left{
		text-align: left !important;
		width: 75% !important;
		font-size: 30rpx !important;
		color: #000 !important;
	}
	.goodsCart .tui-list-cell .tui-list-cell-name{
		font-size: 30rpx !important;
		font-weight: 550 !important;
		color: 000 !important;
	}
	.rightzit{
		width: 75% !important;
		color: #000 !important;
		font-size: 30rpx !important;
	}
	.Determine{
		width: 100%;
		position: absolute !important;
		bottom: 0rpx !important;
		padding: 0 0 0 0 !important;
		padding-right: 0 !important;
		height: 180rpx !important;
	}
	.Determine button{
		padding: 0 auto !important;
		margin: 0 auto !important;
		border-radius: 0rpx !important;
		color: #FFF !important;
		font-size: 40rpx !important;
		line-height: 120rpx !important;
		background-color: #1193E3 !important;
		height: 100% !important;
	}
	.tui-input-ordernumber{
		color: #000 !important;
	}
	.amount{
		color: red;
	}
	.tui-nomore::after{
		background: #f5f6f8 !important;
	}
	.addnumbers_view{
		color: #e8374d;
		font-size: 32rpx;
		width: 200rpx;
		// border: 1rpx solid #e8374d;
		border-radius: 8rpx;
		// background-color: #e8374d;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.tuikuanl view{
		// display: block !important;
	}
	.duplication{
		width: 200rpx;
		text-align: center;
		background: #1193E3;
		color: #FFF;
		margin-bottom: 10rpx;
		line-height: 50rpx;
		border-radius: 10rpx;
		float: right;
		margin-right: 20rpx;
	}
</style>